<template>
    <main>
        <nav>
            <RouterLink to="/tech/proxy">TechProxy</RouterLink>
            <RouterLink to="/tech/ref">TechRef</RouterLink>
            <RouterLink to="/tech/watch">TechWatch</RouterLink>
            <RouterLink to="/tech/toRef">TechToRef</RouterLink>
            <RouterLink to="/tech/promise">TechPromise</RouterLink>
        </nav>
        <RouterView></RouterView>
        <tech-sub msg="world" @hello="hello" v-if="$route.meta.subShow">
            <template v-slot:title>
                <h1>This is an sub page </h1>
            </template>
        </tech-sub>
    </main>
</template>

<script>
import TechSub from "./TechSub.vue";
export default {
    name: "TechT",
    methods: {
        hello(msg) {
            console.log('hello ' + msg)
        }
    },
    components: { TechSub },
    mounted() {
        console.log(this.$route.meta)
    }
}
</script>

<style scoped>
nav {
    width: 100%;
    font-size: 12px;
    text-align: center;
    margin-top: 2rem;
}

nav a.router-link-exact-active {
    color: var(--color-text);
}

nav a.router-link-exact-active:hover {
    background-color: transparent;
}

nav a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
    border: 0;
}

@media (min-width: 1024px) {
    nav {
        text-align: left;
        margin-left: -1rem;
        font-size: 1rem;
        padding: 1rem 0;
        margin-top: 1rem;
    }
}
</style>